<template lang="html">
  <div class="main-page" id="user-page">
    <!-- 标题 -->
    <!-- <van-nav-bar class="main-header" title="物流详情" :left-arrow="true" :fixed="true" :z-index="11" @click-left="onClickLeft"/> -->
    <nav-bar :title="'物流详情'" @goBack="onClickLeft"/>
    <!-- 主体内容 -->
    <div class="main-content has-main-tabbar has-header-space">
      <div class="order-logistics-details-container">
        <div class="no_logistics"  v-if="no_log">
            <div class="logistics_tips">
              <h3>暂时没有物流跟踪记录</h3>
              <p>如有疑问请联系客服</p>
            </div>
            <div class="log_item p-clear-float">
              <div class="logistics-traces-item__icon">
                <img style="width:100%;height:100%;" src="https://mjmh.meijiameihuo.com/wechat/images/icon/logistics-cart.png" alt="">
              </div>
              <div class="item_txt">您的订单已经处理完成，等待出库</div>
            </div>
        </div>
        <!-- 物流基础信息 -->
        <div class="logistics-details-header">
          <!-- 物流公司信息 -->
          <div class="logistics-company-container" v-if="details.kd_express">
            <img class="logistics-company__logo" :src="details.kd_express && details.kd_express.express_logo ? details.kd_express.express_logo : ''" alt="">
            <div class="logistics-company__content">
              <div class="logistics-company__content-name">{{details.kd_express.express_name}}</div>
              <div class="logistics-company__content-phone">{{details.kd_express.express_mobile}}</div>
            </div>
            <img class="icon-phone" @click="callLogisticPhone()" src="https://mjmh.meijiameihuo.com/wechat/images/icon/call-phone.png" alt="">
          </div>
          <!-- 物流单号 -->
          <div class="logistics-number-container" v-if="details.kd_express">
            <span>{{details.shipper_code}}：{{details.logistic_code}}</span>
            <img class="icon-copy" @click="copyLogisticNumber(logistics_number)" :data-clipboard-text="logistics_number" v-clipboard:copy="logistics_number"
            src="https://mjmh.meijiameihuo.com/wechat/images/icon/text-copy.png" alt="">
          </div>
        </div>
        <!-- 物流轨迹信息 -->
        <div class="logistics-details-container" v-if="details.kd_express">
          <div class="logistics-traces">
            <template v-for="(item, index) in trace_list" :index="index">
              <!-- 已揽件 -->
              <div class="logistics-traces-item" v-if="item.Action === '1'" :key="index">
                <div class="logistics-traces-item__explain" v-if="item.AcceptTime">{{item.AcceptTime}}</div>
                <div class="logistics-traces-item__icon">
                  <img style="width:100%;height:100%;" :src="index === 0 ? 'https://mjmh.meijiameihuo.com/wechat/images/icon/logistics-cart-red.png' : 'https://mjmh.meijiameihuo.com/wechat/images/icon/logistics-cart-block.png'" alt="">
                </div>
                <div class="logistics-traces-item__content">
                  <div class="logistics-traces-item__content-title">
                    <span>已揽件</span>
                  </div>
                  <div class="logistics-traces-item__content-desc">
                    <span>{{item.AcceptStation}}</span>
                  </div>
                </div>
              </div>
              <!-- 运输中 -->
              <div class="logistics-traces-item logistics-tracesing" :key="index" v-else-if="item.Action === '2' || item.Action === '201' || item.Action === '202' || item.Action === '211'">
                <div class="logistics-traces-item__explain" v-if="item.AcceptTime">{{item.AcceptTime}}</div>
                <div class="logistics-traces-item__icon" v-if="index === 0">
                  <img style="width:100%;height:100%;" src="https://mjmh.meijiameihuo.com/wechat/images/icon/logistics-cart-red.png" alt="">
                </div>
                <div class="logistics-traces-item__circle" v-else></div>
                <div class="logistics-traces-item__content">
                  <div class="logistics-traces-item__content-title" v-if="index === 0">
                    <span>运输中</span>
                  </div>
                  <div class="logistics-traces-item__content-desc">
                    <span>{{item.AcceptStation}}</span>
                  </div>
                </div>
              </div>
              <!-- 已签收 -->
              <div class="logistics-traces-item" :key="index" v-else-if="item.Action === '3' || item.Action === '301' || item.Action === '302' || item.Action === '304' || item.Action === '311'">
                <div class="logistics-traces-item__explain" v-if="item.AcceptTime">{{item.AcceptTime}}</div>
                <div class="logistics-traces-item__icon">收</div>
                <div class="logistics-traces-item__content">
                  <div class="logistics-traces-item__content-title">
                    <span>{{item.AcceptStation}}</span>
                  </div>
                  <div class="logistics-traces-item__content-desc"></div>
                </div>
              </div>
            </template>
            <!-- 已发货 -->

            <div class="logistics-traces-item">
              <div class="logistics-traces-item__icon">
                <img style="width:100%;height:100%;" src="https://mjmh.meijiameihuo.com/wechat/images/icon/logistics-start.png" alt="">
              </div>
              <div class="logistics-traces-item__content">
                <div class="logistics-traces-item__content-title">
                  <span>已发货</span>
                </div>
                <div class="logistics-traces-item__content-desc">
                  <span>包裹正在等待揽件</span>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  <van-toast id="van-toast" />
  <van-dialog id="van-dialog" />
  </div>
</template>

<script>
import NavBar from '@/components/global/nav-bar.vue'

export default {
  components: { NavBar },
  data () {
    return {
      active: 3,
      logistics_number: null,
      shipper_code: null,
      no_log: false,
      // details: {},
      details: {
        // id: 4,
        // logistic_code: '1234563',
        // shipper_code: 'EMS',
        // state: '签收',
        // trace: [],
        // estimated_delivery_time: '2019-04-22 17:49:45',
        // create_time: '2019-04-28 18:02:18',
        // update_time: '2019-04-28 18:02:08',
        // state_ex: 301,
        // kd_express: {
        // express_id: 0,
        // express_name: '',
        // express_pinyin: '',
        // express_pinyin_100: '',
        // express_site: '',
        // express_is_fav: 0,
        // express_order: 0,
        // express_enable: 0,
        // express_mobile: '',
        // express_logo: ''
        // }
      },
      trace_list: [
        // {
        //   Action: 1,
        //   AcceptStation: '甘肃省邮政速递物流有限公司兰州大客户中心商务项目部已收件（赵水军）',
        //   AcceptTime: '2019-04-09 08:18:00',
        //   Location: '兰州市'
        // },
        // {
        //   Action: '2',
        //   AcceptStation: '到达  兰州邮件处理中心 处理中心',
        //   AcceptTime: '2019-04-09 11:38:42',
        //   Location: '兰州市'
        // },
        // {
        //   Action: '2',
        //   AcceptStation: '离开兰州邮件处理中心 发往甘肃省邮政速递物流有限公司兰州滩尖子揽投部',
        //   AcceptTime: '2019-04-09 13:23:47',
        //   Location: '兰州市'
        // },
        // {
        //   Action: '202',
        //   AcceptStation: '甘肃省邮政速递物流有限公司兰州滩尖子揽投部安排投递，预计21:00:00前投递（投递员姓名：秦亮娃;联系电话：18919036582）',
        //   AcceptTime: '2019-04-09 14:56:34',
        //   Location: '兰州市'
        // },
        // {
        //   Action: '301',
        //   AcceptStation: '投递并签收，签收人：本人收',
        //   AcceptTime: '2019-04-09 16:34:32',
        //   Location: '兰州市'
        // }
      ]
    }
  },
  created () {
    console.log(this.$route)
    if (this.$route.query.logistics_number && this.$route.query.shipper_code && this.$route.query.logistics_number !== '-') {
      this.logistics_number = this.$route.query.logistics_number
      this.shipper_code = this.$route.query.shipper_code
      this.getOrderLogisticsDetails(this.$route.query.logistics_number, this.$route.query.shipper_code)
    } else {
      this.no_log = true
    }
    // this.getOrderLogisticsDetails(9967, 'YZBK')
  },
  methods: {
    onClickLeft () {
      this.$router.go(-1)
    },
    copyLogisticNumber (e) {
      this.$toast('复制成功！')
    },
    getOrderLogisticsDetails (number, code) {
      var data = {
        logistics_number: number,
        shipper_code: code
      }
      this.$toast.loading({ message: '加载中...', duration: 0, forbidClick: true, loadingType: 'spinner' })
      return new Promise((resolve, reject) => {
        this.$Axios({ url: 'order_logistics_details', params: data, method: 'get' }).then((res) => { // 请求成功
          if (res.return_code === '0000') {
            if (Object.prototype.toString.call(res.data) !== '[object String]') {
              this.details = res.data
              if (res.data.trace.length !== 0) {
                this.trace_list = res.data.trace.reverse()
              }
            } else {
              this.$toast(res.data)
            }
          } else {
            this.$toast(res.return_msg)
          }
          this.$toast.clear()
          resolve(res)
        }).catch((error) => { // 请求失败
          this.$toast.clear()
          this.$toast('请求响应失败')
          this.$_requestInterceptor('error', error)
          reject(error)
        })
      })
    },
    // 获取订单物流识别接口
    //   fly.get(fly.config.baseUrl + 'logistics_number_recognise?logistics_number=' + number).then((response) => {
    //     console.log(response)
    //     if (response.return_code === '0000') {
    //       this.setData({ 'logistics_number_recognise': response.data })
    //     } else {
    //       Toast(response.return_msg)
    //     }
    //   }).catch((error) => {
    //     console.log(error)
    //     Toast('请求响应失败')
    //   })
    // },
    callLogisticPhone (e) {
      console.log(this.details)
      console.log('拨打物流电话', this.details.kd_express.express_mobile)
      if (this.details.kd_express.express_mobile) {
        window.location = 'tel:' + this.details.kd_express.express_mobile
      }
    }
  }
}
</script>
<style lang="scss" scoped>
.no_logistics .logistics_tips{
  height: 52px;
  background: #272226;
  padding: 18px 15px;
  font-size: 15px;
  color: #fff;
  font-weight: 300;
}
.no_logistics .logistics_tips p {
  font-size: 13px;
}
.no_logistics .log_item {
  background: #fff;
  padding: 15px;
}
.no_logistics .log_item .logistics-traces-item__icon {
  height: 35px ; width: 35px;
  float: left;
}
.no_logistics .log_item .item_txt {
  color: #4A90E2; font-size: 13px;
  float: left;
  margin-left: 15px;
}

.logistics-details-header {
  padding: 0 15px;
  background: #fff;
  margin-bottom: 10px;
}

/* 物流公司信息 */
.logistics-company-container {
  position: relative;
  padding: 15px 0 15px 65px;
  min-height: 50px;
  border-bottom: 1px solid #EDEFF2;
}

.logistics-company__content {}

.logistics-company__logo {
  position: absolute;
  top: 15px;
  left: 5px;
  width: 50px;
  height: 50px;
}

.logistics-company__content-name {
  line-height: 24px;
  font-size: 17px;
  font-weight: 500;
  color: #333;
  margin: 3px 0;
}

.logistics-company__content-phone {
  line-height: 16px;
  font-size: 13px;
  font-weight: 400;
  color: #666;
}

.icon-phone {
  position: absolute;
  top: 23px;
  right: 0;
  width: 35px;
  height: 35px;
}

/* 物流单号 */
.logistics-number-container {
  padding: 15px 0;
  line-height: 20px;
  font-size: 12px;
  font-weight: 400;
  color: #666;
}

.logistics-number-container .icon-copy {
  margin-left: 12px;
  vertical-align: middle;
  width: 20px;
  height: 20px;
}

/* 物流轨迹信息 */
.logistics-details-container {
  padding: 20px 15px;
  background: #fff;
}

.logistics-traces {
  margin: 0 0 0 70px;
  /* margin: 0 0 48rpx 140rpx; */
}

.logistics-traces-item {
  position: relative;
  padding-bottom: 20px;
}
/* 左侧轴 */
.logistics-traces-item:before {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  width: 1px;
  background: #D6D6D6;
  left: 15px;
  margin: 0;
}
.logistics-traces-item:last-child:before {
  display: none;
}
/* 说明 */
.logistics-traces-item .logistics-traces-item__explain {
  position: absolute;
  left: -70px;
  top: 0;
  width: 70px;
  line-height: 18px;
  font-size: 12px;
  color: #999;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  /* text-align: center;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap; */
}
/* 图标 */
.logistics-traces-item .logistics-traces-item__icon {
  position: absolute;
  left: 4px;
  top: 0;
  width: 22px;
  height: 22px;
  font-size: 14px;
  line-height: 22px;
  color: #fff;
  background: #D6D6D6;
  border-radius: 50%;
  text-align: center;
}
.logistics-traces-item .logistics-traces-item__icon image {
  width: 100%;
  height: 100%
}
/* 圆点 */
.logistics-tracesing .logistics-traces-item__circle {
  position: absolute;
  left: 13px;
  top: 8px;
  width: 6px;
  height: 6px;
  background: #D6D6D6;
  border-radius: 50%;
  text-align: center;
}
/* 内容 */
.logistics-traces-item .logistics-traces-item__content {
  position: relative;
  margin-top: 0;
  margin-left: 30px;
  margin-right: 5px;
  padding: 0;
}
.logistics-traces-item .logistics-traces-item__content:before {
  content: " ";
  display: table;
}
.logistics-traces-item .logistics-traces-item__content:after {
  content: " ";
  display: table;
  clear: both;
}
.logistics-traces-item__content-title {
  line-height: 22px;
  font-size: 14px;
  color: #999;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.logistics-traces-item__content-desc {
  line-height: 17px;
  font-size: 12px;
  color: #999;
}
</style>
